<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #ms1,
    #ms2,
    #ms3 {
        background-color: pink;
        display: block;
        width: 400px;
        height: 200px;
        margin: 0 auto;
        font-size: 1.25em;
        position: relative;
        margin-bottom: 2px;
    }
</style>

<body>
    <!-- 有一个消息列表。 使用 JavaScript 在每条消息的右上角添加一个关闭按钮。点击这个关闭按钮，对应的消息盒子隐藏。-->
    <div id="ms1">
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel incidunt soluta amet expedita ipsam
            repellendus
            explicabo cupiditate ratione quasi quis, minima cum delectus numquam velit impedit fugiat sapiente quam
            fuga.
        </p>
    </div>
    <div id="ms2">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi maxime ipsum libero, minus exercitationem
            omnis
            sequi ad assumenda repellat voluptatum, sed blanditiis sint nisi adipisci eius provident eos mollitia ipsa.
        </p>
    </div>
    <div id="ms3">
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur accusantium odit culpa, et eaque dolore
            nulla adipisci nam consequuntur. Voluptatum sint saepe soluta corporis? Earum quod fuga labore temporibus
            optio.
        </p>
    </div>
    <script>
        //获取到所有div
        var div = document.querySelectorAll('div');
        for (var i = 0; i < div.length; i++) {
            //给每个div创建一个按钮
            var bt = document.createElement('button');
            //往按钮中插入x
            bt.innerHTML = '[X]';
            bt.style.fontSize = '15px';
            //设置按钮的宽高
            bt.style.width = '20px';
            bt.style.height = '20px';
            //将按钮设置为绝对定位
            bt.style.position = 'absolute';
            //按钮距右边和上边的距离
            bt.style.top = 0;
            bt.style.right = 0;
            bt.style.backgroundColor = 'pink';
            //将按钮的边框改为粉色
            bt.style.border = '1px solid pink';
            div[i].prepend(bt);
            bt.onclick = function () {
                this.parentNode.style.display = 'none';
            }
        }
    </script>
</body>

</html>